<!-- navbar header -->
<div class="navbar-header {{app.settings.navbarHeaderColor}}" style="padding-left: 22px;padding-top: 12px;height: 50px;">
  <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
    <i class="glyphicon glyphicon-cog"></i>
  </button>
  <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
    <i class="glyphicon glyphicon-align-justify"></i>
  </button>
  <!-- brand -->
  <a href="#/" class="">
    <img src="img/companylogo.png" alt="." class="">
  </a>
  <!-- / brand -->
</div>
<!-- / navbar header -->

<!-- navbar collapse -->
<div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">
  <!-- buttons -->
  <div class="nav navbar-nav hidden-xs">
    <a href class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
      <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
    </a>
    <a href class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user">
      <i class="icon-user fa-fw"></i>
    </a>
  </div>
  <!-- / buttons -->

  <!-- link and dropdown -->

  <!-- / link and dropdown -->

  <!-- search form -->
  <form class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" target=".navbar-collapse" role="search" ng-controller="TypeaheadDemoCtrl">
    <div class="form-group">
      <div class="input-group">
        <input type="text" ng-model="selected"  id="searchProcess" class="form-control input-sm bg-light no-border rounded padder" placeholder="{{'header.navbar.searchProcess'|translate}}">
              <span class="input-group-btn">
                <a ui-sref="app.process.list({fold:'-1'})" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></a>
              </span>
      </div>
    </div>
  </form>
  <!-- / search form -->

  <!-- nabar right -->
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown hidden-sm" is-open="lang.isopen" dropdown>
      <a href class="dropdown-toggle" dropdown-toggle>
        {{selectLang}} <b class="caret"></b>
      </a>
      <!-- dropdown -->
      <ul class="dropdown-menu animated fadeInRight w">
        <li ng-repeat="(langKey, label) in langs">
          <a ng-click="setLang(langKey, $event)" href>{{label}}</a>
        </li>
      </ul>
      <!-- / dropdown -->
    </li>
    <li class="hidden-xs">
      <a ui-fullscreen></a>
    </li>

    <li class="dropdown" dropdown>
      <a href class="dropdown-toggle clear" dropdown-toggle>
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img ng-src="/suite/plugins/servlet/getUserAvatar?user={{userInfo.userName}}&{{userPhotoTimestamp}}" class="img-circle">
                <i class="on md b-white bottom"></i>
              </span>
        <span class="hidden-sm hidden-md">{{userInfo.firstName}}</span> <b class="caret"></b>
      </a>
      <!-- dropdown -->
      <ul class="dropdown-menu animated fadeInRight w">
        <li>
          <a href="#/app/userprofile/{{userInfo.userName}}">
            <span translate="aside.nav.Profile"></span>
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a href="/suite/logout" ><span translate="header.navbar.logout"></span></a>
        </li>
      </ul>
      <!-- / dropdown -->
    </li>
  </ul>
  <!-- / navbar right -->

</div>
<!-- / navbar collapse -->